<template>
  <div class="metaTab">
    <el-tabs v-model="tabPageName" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in pageOption" :key="index" :label="item.label" :name="item.key">
        <slot :name="item.key"></slot>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  export default {
    name: 'MetaTab',
    mixins: [],
    props: {
      pageOption: { 
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        tabPageName: ""
      }
    },
    mounted() {
      if(this.pageOption.length > 0){
        this.tabPageName = this.pageOption[0].key
      }
    },
    methods: {
      handleClick(tab, event) {
        this.$emit("tabClick", this.tabPageName)
      }
    }
  }
</script>
<style lang='less'>
  .metaTab{
    width: 100%;
    float: left;
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
  }
</style>
